<template>
  <div class="app-container overflow_yAuto">
    <div>
      <div class="role-list">
        <div slot="header" class="clearfix job-tab-header">
          <span>版本维护</span>
        </div>

        <div>
          <div class="select-container" style="margin-top:0px">
            <el-row class="">
              <el-form ref="appendlist" :model="appendlist" label-position='center' :inline="true" size="small"
                label-width="110px">
                <el-col :span="6">
                  <el-form-item label="" prop="version" size='small' style="margin:12px 0px;">
                    <el-input type="number" placeholder="请输入版本号" v-model="appendlist.version"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="describe" size='small' style="margin:12px 0px;">
                    <el-input type="textarea" placeholder="请输入更新描述" v-model="appendlist.describe"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="7" style="padding-right:5px;margin-top:15px;float:right">
                  <el-upload style="float:right" class="upload-demo" ref="upload" :action="actionUrl" :on-success="successFile"
                    :on-error="onError" :data="appendlist" :on-preview="submit" :on-remove="handleRemove"
                    accept=".apk"
                    :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="file">
                    <el-button size="small" align="center" class="filter-item" type="file" style="float:right;padding-top:5px"
                      icon="el-icon-edit">上传APK提交</el-button>
                  </el-upload>
                </el-col>
              </el-form>
            </el-row>
          </div>
        </div>
      </div>
      <div>
        <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" max-height="380"
          size="small" border fit highlight-current-row style="width: 100%;min-height:320;border:#eeeeee">
          <el-table-column align="center" label="版本号" min-width="200px" prop="version">

          </el-table-column>
          <el-table-column align="center" label="更新描述" min-width="140px" prop="describe">
          </el-table-column>
          <el-table-column align="center" label="操 作" min-width="140" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button style="width:44px;" type="text" size="small" @click="handleEdit(scope.row)">下载</el-button>

            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination background @size-change="handleSizeChange" @current-change="changePageNum" :current-page="page.num"
            :page-size="page.size" :total="page.total" layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>
      <div>

      </div>
    </div>
  </div>
</template>

<script>
  import '@/styles/newstyle.scss'
  import {
    replyAppProble, //发布回复
    getProbleList, //问题列表
    uploadAppFile, //上传
  } from '@/api/systemManage/roleManagement'

  import {
    isInnerOption,
    statusOptions,
    statusKeyValue,
    isInneNoKeyValue
  } from '@/utils/allOptions'
  const id = this.id
  const appId = this.appId
  const describe = this.describe
  const version = this.version
  export default {
    components: {},
    directives: {},
    data() {
      return {
        list: {},
        describe: '',
        searchstr: {},
        appendlist: {
          'version': '',
          'describe': '',
          'userId': this.$route.params.id,
          'appId': '1',
        },
        userId: '',
        appId: '',
        files: '',
        page: {
          total: 0,
          num: 1,
          size: 10
        },
        input1: '',
        // -------Options-----------
        isInnerOption,
        dialogVisible: false, //弹框
        copyRow: {}, //存放回复内容
        statusOptions,
        // -------Options-----------
        // 0:检索 1:编辑/新建 2:配置岗位 3:配置权限

        tableKey: 0,
        list: [], //接口返回数据
        content: '', //审核状态
        listOption: [{
            status: '2',
            label: '审核不通过'
          },
          {
            status: '1',
            label: '审核通过'
          },
          {
            status: '0',
            label: '待审核'
          }
        ],
        listQuery: {
          rowBounds: {
            page: 1,
            rows: 10
          },
          condition: {
            name: {
              'property': 'name',
              'value': '',
              'type': 'LIKE'
            },
            isInner: {
              'property': 'isInner',
              'value': '',
              'type': 'EQ'
            },
            status: {
              'property': 'status',
              'value': '',
              'type': 'EQ'
            }
          },
          fields: [],
          sort: [{
            direction: 'ASC',
            property: 'id'
          }]
        },
        status: '', //初始状态
        total: null,
        listLoading: false,
        actionUrl: ''
      }
    },


    filters: {
      yesOrNoFilter(target) {
        return isInneNoKeyValue[target]
      },
      statusFilter(target) {
        return statusKeyValue[target]
      }
    },
    created() { // 画面刚进入method
      this.getList();
    },
    methods: {
      // 上传
      // upload(file){
      //     //传参
      //      this.appendlist.userId=this.$store.getters.userid
      //     this.searchstr = {
      //       "describe":this.describe,//回复内容
      //       "appid":this.appId,
      //       "userId":this.$store.getters.userid,
      //     }
      //     uploadAppFile(this.searchstr).then(response => {

      //       if (response.data.statusCode === 200) {
      //             this.listLoading = false
      //             // this.getList()
      //            this.$message({
      //               message: '上传成功',
      //               type: 'success'
      //             })
      //           }
      //        else {
      //             this.$message.error('上传失败')
      //           }
      //         })
      // },
      getList() { //列表信息
        this.listLoading = true
        this.appendlist.userId = this.$store.getters.userid
        //传参
        let searchstr = {
          page: this.page.num,
          rows: this.page.size,
        }
        getProbleList(searchstr).then(response => { //列表接口
          if (response.data.statusCode === 200) {
            this.list = response.data.rows
            this.page.total = response.data.total
            this.listLoading = false
            //循环判断lumped
            this.list.forEach(val => {
              this.describe = val.describe;
              this.version = val.version;
              this.appId = val.appId;
              this.userId = val.userId;
            });
            this.actionUrl = process.env.BASE_API + '/zcm/zcm/file/uploadAppFile'

          } else {
            this.$message.error('查询失败')
          }
        })
      },
      submit(appendlist) {
        //保存数据
        var form = "appendlist";
        this.$refs[form].validate((valid) => {
          if (valid) {
            this.appendlist.userId = this.$store.getters.userid
            this.searchstr = {
              "describe": appendlist.describe, //回复内容
              "appid": this.appId,
              "version": appendlist.version,
              "userId": this.$store.getters.userid,
              "file": this.files,
              //  "file":' http://210.73.217.92:8041/zcm/zcm/file/uploadAppFile/' + this.id + '/' + this.appId + '/' +appendlist.describe
            }
            uploadAppFile(this.searchstr).then(response => {
              if (response.data.statusCode === 200) {
                this.$message({
                  type: 'success',
                  message: '保存成功！'
                })
                this.getList()
                appendlist = {}
              }

              if (response.data == null) {
                this.$message({
                  type: 'error',
                  message: "保存失败"
                })
              }
            })
          } else {
            return false
          }
        })
      },
      handleEdit(row) { //下载
        const download = row.url
        window.open(download)
      },
      // 检索条件框回车键按下后，跳转到首页
      handleFilter() {
        this.listQuery.rowBounds.page = 1
        this.getList()
      },
      // 页面显示条数
      handleSizeChange(val) {
        this.listQuery.rowBounds.rows = val
        this.getList()
      },
      // 翻页器使用
      changePageNum(pageNum) {
        this.page.num = pageNum
        this.getList()
      },
      //apk上传
      handleRemove(file, fileList) {},

      successFile(response, file, fileList) {
        if (response.statusCode == 200) {
          this.$message({
            type: 'success',
            message: '保存成功！'
          })
        } else {
          this.$message({
            type: 'error',
            message: '保存失败！'
          })
        }
        this.files = file.response.data
        this.getList()
        this.$refs.upload.clearFiles()
        this.appendlist.describe = ""
        this.appendlist.version = ""
      },
      onError(err, file, fileList) {
        //  console.log(file);
        //    console.log(err);
        //     console.log(fileList);
        this.$message({
          type: 'error',
          message: "保存失败"
        })
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }

    }
  }

</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .select-container {
    padding: 10px 10px;
    margin-bottom: 10px;
    margin-left: 3px;
    margin-right: 3px;
    border-radius: 4px;
    border: 1px solid #eeeeee;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 100%;
  }

  .el-button--mini,
  .el-button--mini.is-round {
    padding: 3px 5px;
  }

</style>
